<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="'查看活动信息'">

    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :label-width="120">
          <FormItem prop="act_name" label="活动名称">
            {{form.data.act_name}}
          </FormItem>
          <FormItem label="活动地区">
            <Row>
              <Col span="8">
                <FormItem prop="province">
                  <Select v-model="form.data.province" placeholder="请选择省份" disabled>
                    <Option v-for="(item, index) in areaCodeList" :value="item.code" :key="item.code">{{item.name}}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="7" offset="1">
                <FormItem prop="city">
                  <Select v-model="form.data.city" placeholder="请选择城市" disabled>
                    <Option v-for="(item, index) in cityList" :value="'' + item.code" :key="item.code">{{item.name}}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="7" offset="1">
                <FormItem prop="county">
                  <Select v-model="form.data.county" placeholder="请选择区县" disabled>
                    <Option v-for="(item, index) in countyList" :value="'' + item.code" :key="item.code">{{item.name}}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </FormItem>
          <FormItem prop="act_year" label="年度">
            <Select v-model="form.data.act_year" placeholder="请选择" disabled>
              <Option v-for="(item, index) in actYearCodeList" :value="'' + item.code" :key="item.code">{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="pk_activity_year_plan" label="年度计划">
            <Select
              v-model="form.data.pk_activity_year_plan"
              remote
              filterable
              :remote-method="getYearPlan"
              :loading="yearplanLoading"
              disabled>
              <Option v-for="(option, index) in yearplanList" :value="option.pk_act_year_plan" :key="option.pk_act_year_plan">{{option.act_name}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="act_sponsor" label="主办方">
            {{form.data.act_sponsor}}
          </FormItem>
          <FormItem prop="act_organizer" label="协办方">
            {{form.data.act_organizer}}
          </FormItem>
          <FormItem prop="act_bg" label="活动介绍">
            {{form.data.act_bg}}
          </FormItem>
          <FormItem label="报名时间">
            {{form.data.signup_start_time | formatDate('YYYY-MM-DD HH:mm:ss') }} - {{form.data.signup_end_time | formatDate('YYYY-MM-DD HH:mm:ss') }}
          </FormItem>
          <FormItem label="活动时间">
            {{form.data.act_start_time | formatDate('YYYY-MM-DD HH:mm:ss') }} - {{form.data.act_end_time | formatDate('YYYY-MM-DD HH:mm:ss') }}
          </FormItem>
          <FormItem label="集合时间">
            {{form.data.conv_date | formatDate('YYYY-MM-DD HH:mm:ss') }}
          </FormItem>
          <FormItem prop="conv_address" label="集合地点">
            {{form.data.conv_address}}
          </FormItem>
          <FormItem prop="sign_up_total" label="拟报名人数">
            {{form.data.sign_up_total}}
          </FormItem>
          <FormItem prop="explains" label="活动说明">
            {{form.data.explains}}
          </FormItem>
          <FormItem prop="hb_image_path" label="活动图片">
            <view-img v-if="form.visible" :defaultImageList="defaultImageList"></view-img>
          </FormItem>
        </Form>
      </Col>
    </Row>

    <div slot="footer">
      <Button @click="closeModal()" type="primary">关闭</Button>
    </div>
  </Modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import viewImg from '@/components/view-img'
  import codeApi from '@/api/code'
  import yearplanApi from '@/api/yearplan'
  import clubApi from '@/api/club'

  export default {
    name: 'update-modal',
    props: [
      'form'
    ],
    components: {
      viewImg
    },
    data () {
      return {
        loading: true,
        yearplanLoading: false,
        yearplanList: [],
        cityList: [],
        countyList: [],
        matchStatus: '-2'
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        areaCodeList: 'areaCodeList',
        actYearCodeList: 'actYearCodeList',
        actTypeCodeList: 'actTypeCodeList',
        actStatusCodeList: 'actStatusCodeList'
      })
    },
    watch: {
      'form.visible': 'onClose',
      'form.data.pkInitial': 'onUpdateShow',
      'form.data.act_year': 'getYearPlan',
      'form.data.province': 'getCity',
      'form.data.city': 'getCounty'
    },
    methods: {
      async getCity () {
        let parentid = this.form.data.province
        const { body } = await codeApi.list({
          codeType: 'area',
          parentid
        })
        this.cityList = body.responseData
      },
      async getCounty () {
        let parentId = this.form.data.city
        const { body } = await codeApi.list({
          codeType: 'area',
          parentid: parentId
        })
        this.countyList = body.responseData
      },
      async getYearPlan (query) {
        this.yearplanLoading = true
        const { body } = await yearplanApi.list({
          act_name: query,
          act_type: this.form.data.act_type,
          pk_rclub_info: this.userInfo.pkRclubInfo,
          currentPage: 1,
          limit: 10
        })
        const { responseData } = body
        this.yearplanList = responseData.content.map((item) => {
          return item
        })
        this.yearplanLoading = false
      },
      onClose (isVisible) {
        if (isVisible) {
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.hb_image_path || '')
        }
      },
      closeModal () {
        this.form.visible = false
      },
      async getClubDetail () {
        const { body } = await clubApi.detail({
          pkRclubInfo: this.userInfo.pkRclubInfo
        })
        const { responseData } = body
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.matchStatus = responseData.matchStatus
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    async mounted () {
      this.$store.dispatch('getCode', 'act_year')
      this.$store.dispatch('getCode', 'act_type')
      this.$store.dispatch('getCode', 'act_status')
      this.$store.dispatch('getCode', 'area')
      await this.getYearPlan('')
      this.getClubDetail()
    }
  }
</script>

<style lang="less" scoped>
  .ivu-radio-group-button.ivu-radio-group-large .ivu-radio-wrapper {
    font-size: 16px;
  }

  .step-1 {
    .step-1-con {
      margin: 10px;
      padding: 10px;
      height: 400px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  }

  .step-2 {
  }
</style>
